<template>
  <!-- 仓储数据 -->
  <div class="allBox">
    <h1>仓储数据</h1>
    <div class="allContent">
      <div class="rightTwoBox">
        <div v-if="list.length > 0" id="storageData" class="allWidthHeight" />
        <div v-else class="kong">暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      list: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    /* 获取仓储数据 */
    async getWmsNumRate() {
      const res = await this.$axios.get('/board/composite/wmsNumRate')
      if (res.data.code === 200) {
        this.list = res.data.data
        let data = {
          arr: [],
          rate: []
        }
        res.data.data.forEach((item) => {
          data.arr.push({ name: item.wmsName, max: 100 })
          data.rate.push((item.wmsNum * item.numRate) / item.wmsNum)
        })
        setTimeout(async () => {
          console.log(data)
          this.storageDatas(data)
        }, 500)
      }
    },
    /* 仓储数据 */
    storageDatas(data) {
      const option = {
        radar: {
          // shape: 'circle',
          indicator: data.arr,
          axisName: {
            color: '#fff',
            fontSize: '14px'
          },
          center: ['50%', '60%'],
          splitArea: {
            areaStyle: {
              color: ['rgba(255,255,255,0)'] // 雷达图区域网格的颜色
            }
          }
        },
        series: [
          {
            type: 'radar',
            // radarIndex: 1,
            data: [
              {
                value: data.rate,
                areaStyle: {
                  color: '#036480'
                },
                // itemStyle: {
                //   show: true,
                //   normal: {
                //     borderWidth: 0,
                //     color: '#038CAB',
                //     borderColor: '#038CAB'
                //   }
                // },
                symbol: 'rect',
                symbolSize: 12,
                lineStyle: {
                  width: 1,
                  color: '#038CAB'
                },
                label: {
                  show: true,
                  color: '#fff',
                  formatter: function (params) {
                    return params.value + '%'
                  }
                }
                // symbol: 'none'
              }
            ]
            // symbol: 'none'
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('storageData'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.rightTwoBox {
  height: 100%;
  padding: 20px;
}
.kong {
  background-size: 50% auto;
}
</style>
